<template>

<div class="page" data-name="public-parking-form">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left">
        <a href="#" data-force="true" data-ignore-cache="true" class="link back">
          <i class="f7-icons">chevron_left</i>
        </a>
      </div>
      <div class="title">地址定位</div>
      <div class="right">
      </div>
    </div>
  </div>
  <div class="page-content">
       <div id="container" class="map" tabindex="0"></div>
	    <div id="pickerBox">
	        <input id="pickerInput" placeholder="输入关键字选取地点" />
	        <div id="poiInfo"></div>
	    </div>
	  </div>
</div>
</template>
<style>
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
        font-size: 13px;
    }
    
    #pickerBox {
        position: absolute;
        z-index: 9999;
        top: 50px;
        right: 30px;
        width: 300px;
    }
    
    #pickerInput {
        width: 200px;
        padding: 5px 5px;
    }
    
    #poiInfo {
        background: #fff;
    }
    
    .amap_lib_placeSearch .poibox.highlight {
        background-color: #CAE1FF;
    }
    
    .amap_lib_placeSearch .poi-more {
        display: none!important;
    }
    </style>
<script>



  return {
    data: function () {
      return {
    	  fruits: 'Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple'.split(' '),
      };
    },
  	on:{
  		
  		 pageInit: function () {
  			 var selectPostionResult = ",";
  			var self = this;
   	        var app = self.$app;
   	        var fruits = self.fruits;
   	        var $ = self.$;
   	     	var router = this.$router;
   	     var map = new AMap.Map('container', {
   	        zoom: 10
   	    });

   	    AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {

   	        var poiPicker = new PoiPicker({
   	            //city:'北京',
   	            input: 'pickerInput'
   	        });

   	        //初始化poiPicker
   	        poiPickerReady(poiPicker);
   	    });

   	    function poiPickerReady(poiPicker) {

   	        window.poiPicker = poiPicker;

   	        var marker = new AMap.Marker();

   	        var infoWindow = new AMap.InfoWindow({
   	            offset: new AMap.Pixel(0, -20)
   	        });

   	        //选取了某个POI
   	        poiPicker.on('poiPicked', function(poiResult) {

   	            var source = poiResult.source,
   	                poi = poiResult.item,
   	                info = {
   	                    source: source,
   	                    id: poi.id,
   	                    name: poi.name,
   	                    location: poi.location.toString(),
   	                    address: poi.address
   	                };

   	            marker.setMap(map);
   	            infoWindow.setMap(map);

   	            marker.setPosition(poi.location);
   	            infoWindow.setPosition(poi.location);

   	            infoWindow.setContent('POI信息: <pre>' + JSON.stringify(info, null, 2) + '</pre>');
   	            infoWindow.open(map, marker.getPosition());

   	            //map.setCenter(marker.getPosition());
   	        });

   	        poiPicker.onCityReady(function() {
   	            poiPicker.suggest('美食');
   	        });
   	    }   
  		 }
  	}
  };
</script>
